<template>
  <div  class="w-100 calender">
    <div class="clearfix calenderTop border-bottom py-1">
      <div class="pull-left" v-text="formateCurrentDate"></div>
      <div class="pull-right" >
        <el-button-group>
          <el-button size="mini" @click="changeMouth('pre')">上个月</el-button>
          <el-button size="mini" @click="changeMouth('today')">今天</el-button>
          <el-button size="mini" @click="changeMouth('next')">下个月</el-button>
        </el-button-group>
      </div>
    </div>
    <div  class="mt-1 clearfix ">
      <div  v-for="item in weekArray" :key="item" class="text-center pull-left weekHead">{{item}}</div>
    </div>
    <div  class="mt-1 clearfix">
      <div v-for="(item,index) in arrayList" :key="item.date" 
        class="pull-left calenderDay border-top border-right position-relative" :class="{'border-left':index%7===0}">
          <div class="position-absolute w-100 h-100 box-border" :class="{'bg-translucent':item.isToday<0}" @click="showDetail(item.date)" >
            <div  :class="[{'text-light-muted':item.isToday===-1,'text-danger':item.isToday===0,'text-dark':item.isToday>0}]" class="text-center  pt-1">
              <div class="font-xlg" :class="[{'font-weight':item.isToday===0}]">{{parseInt(item.day)}}</div>
              <div class="font-sm font-weight" v-if="item.day==='01'">{{item.month==='01'?item.year+'年':''}}{{parseInt(item.month)+'月'}}</div>
            </div>
              <!-- 进度条 -->
            <div class="position-absolute progressBar bottom-0 " :style="{width:item.percentage}"></div>
            <div class="position-absolute font-md bottom-0 w-100 text-center progressBarText"  :class="{'text-success':item.maxTreatment>0&&item.isToday>-1,'text-waring':item.maxTreatment===0&&item.isToday>-1,'bg-danger':item.maxTreatment<0&&item.isToday>-1,'text-light-muted':item.isToday===-1}">{{item.maxTreatment}}</div>
          </div>
      </div>
      <div class='clearfix border-bottom calenderTop'></div>
    </div>


    <el-dialog :title="dialog.title" :visible.sync="dialog.open" width="50%" center :modal-append-to-body="false" :modal="false" v-dialogDrag>
      <el-table  :data="dialog.tableData"  border class="mt-1"  @row-click="updateInfo">
        <el-table-column  prop="provider.name" width="80" label="客户" align="center"/>
        <el-table-column  prop="treatmentPeriod" width="50" label="疗程" align="center"/>
        <el-table-column  prop="treatmentTimes" width="50" label="次数" align="center"/>
        <el-table-column prop="" label="计划治疗日期" min-width="120"  align="center">
          <template slot-scope="scope">
            <div>{{timestampToTime(scope.row.planTreatmentTime,'yyyy-mm-dd hh:mm')}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="treatmentTypeName.name" label="治疗类型"  min-width="120"  align="center"/>
        <el-table-column prop="treatmentUseTime" label="预计耗时(分钟)"  width="120"  align="center"/>
        <el-table-column  label="分配机器"  width="100">
          <template slot-scope="scope">
            <div>{{scope.row.planMachineName.name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="序号" width="50" align="center"/>
        <el-table-column label="状态"  align="center">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.state===1">已做</el-tag>
            <el-tag type="waring" v-if="scope.row.state===0">未做</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="120"/>
      </el-table>
    </el-dialog>
     <el-dialog :title="updateInfoDialog.title" :visible.sync="updateInfoDialog.open" width="50%" center :modal-append-to-body="false" :modal="false" v-dialogDrag>
        <treatmentPlanForm :providerId="updateInfoDialog.providerId" @submitSuccess="submitSuccess" :model="updateInfoDialog.model"  :type="updateInfoDialog.type" :typeList="updateInfoDialog.typeList"/>
     </el-dialog>
  </div>
</template>
<script>
import {allPlanTreatment,getlanTreatmentDetail,treatmentTypeList} from "plugins/axios/inquiryRecord.js"
import {getCalendar}  from 'plugins/calendar.js'
import treatmentPlanForm from 'views/operationManage/components/inquiryRecordDetail/treatmentPlan/treatmentPlanForm.vue';
export default {
  components:{
     treatmentPlanForm
  },
  props:{
  },
  data(){
    return{
      weekArray:['一','二','三','四','五','六','日'],
      calendarObj:{},
      arrayList:[],
      popoverDate:[],
      currentDate:new Date(),
      treatmentType:'',
      dialog:{
        title:'',
        open:false,
        tableData:[]
      },
      updateInfoDialog:{ 
          title:'',
           open:false,
           model:{},
           type:'',
           typeList:[],
         }
      }
  },
  computed:{
    formateCurrentDate(){
      return this.calendarObj.year+' 年 '+this.calendarObj.month+' 月 '
    }
  },
  created(){
    let self = this;
    treatmentTypeList().then(res=>{
      self.updateInfoDialog.typeList=res.content;
    })
  },
  mounted(){
     
  },
  methods:{
    submitSuccess(){
       this.updateInfoDialog.open = false;
       this.init();
    },
     updateInfo(row){
          let self =this;
          self.updateInfoDialog.open=true;
          self.updateInfoDialog.model=row;
           self.updateInfoDialog.type='update';
     },

    init(treatmentType){
      this.calendarObj = getCalendar(this.currentDate);
      this.treatmentType=treatmentType;
      this.getAllPlanTreatmentList(this.calendarObj.range[0],this.calendarObj.range[1]);
    },
    getAllPlanTreatmentList(startTime,endTime){
      let self= this,postData={
        startTime,
        endTime,
        treatmentType:this.treatmentType
      }
      self.arrayList=[]
      allPlanTreatment(postData).then(res=>{
        self.tableList=res.content;
        res.content.forEach((el,index)=>{
          self.arrayList.push({
            ...self.calendarObj.list[index],
            ...el,
            percentage:(el.maxTreatment/(el.maxTreatment+el.presentTreatment))*100+"%"
          })
        })
      console.log(self.arrayList)
      })
    },
   changeMouth(type){
      let date = new Date(this.currentDate),
        year = date.getFullYear(),
        month = date.getMonth();
      switch(type){
        case 'pre':
          this.currentDate = new Date((month === 0?year-1:year),(month === 0?11:month - 1))
          break
        case 'today':
          this.currentDate = new Date();
          break
        case 'next':
          this.currentDate = new Date((month === 11?year+1:year),(month === 11?0:month + 1))
          break
      }
      this.init()
    },
  /**展示选中日期的详情*/  
  showDetail(date){
    let self = this;
    self.popoverDate=[];
    self.dialog.open=true;
    self.dialog.title=`${date}`
    getlanTreatmentDetail({date,treatmentType:this.treatmentType}).then(res=>{
      self.dialog.tableData=[...res.content]
    })
   }
  }
}
</script>
<style scoped>
.calender .calenderTop{
   width:98%;
}
.calender .weekHead{
  width:14%;
  height:60px;
  line-height: 60px;
}
.calender  .calenderDay{
  width:14%;
  height:90px;
  box-sizing: border-box;
}
.progressBar{
  height:30px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background:rgb(225, 243, 216);
}
.progressBarText{
  line-height: 30px;

}
</style>